<script setup lang="ts">
import useDetail from '@/composables/custcare/talk/useDetail';
const props = defineProps(['visitorInfo'])

const { visitorDetailForm, mainLayoutHeight, visitor, detailModel, ipBlack } = useDetail(props.visitorInfo)

</script>
<template>
    <div class="visitor-detail" :style="{ height: mainLayoutHeight + 'px' }">
        <el-row>
            <el-col :span="6" :offset="0">ip黑名单</el-col>
            <el-col :span="18" :offset="0" v-if="visitor.data.is_ip_black == 0">
                否
                <el-button type="danger" size="small" @click="ipBlack(true)">加入</el-button>
            </el-col>
            <el-col :span="18" :offset="0" v-else>
                是
                <el-button type="success" size="small" @click="ipBlack(false)">解除</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6" :offset="0">ip地址</el-col>
            <el-col :span="18" :offset="0">{{ visitor.data.client_ip }}</el-col>
        </el-row>
        <el-row>
            <el-col :span="6" :offset="0">省</el-col>
            <el-col :span="18" :offset="0">{{ visitor.data.province }}</el-col>
        </el-row>
        <el-row>
            <el-col :span="6" :offset="0">城市</el-col>
            <el-col :span="18" :offset="0">{{ visitor.data.city }}</el-col>
        </el-row>
        <el-row>
            <el-col :span="6" :offset="0">来源</el-col>
            <el-col :span="18" :offset="0">{{ visitor.detail.refer }}</el-col>
        </el-row>
        <el-row>
            <el-col :span="6" :offset="0">Host</el-col>
            <el-col :span="18" :offset="0">{{ visitor.detail.host }}</el-col>
        </el-row>
        <el-row>
            <el-col :span="6" :offset="0">访问次数</el-col>
            <el-col :span="18" :offset="0">{{ visitor.detail.visits }}</el-col>
        </el-row>
        <el-form :model="detailModel" ref="visitorDetailForm" label-width="40px">
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="name" label="姓名">
                        <el-input v-model="detailModel.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="mobile" label="手机">
                        <el-input v-model="detailModel.mobile"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="email" label="邮箱">
                        <el-input v-model="detailModel.email"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="qq" label="QQ">
                        <el-input v-model="detailModel.qq"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="wechat" label="微信">
                        <el-input v-model="detailModel.wechat"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="remark" label="备注">
                        <el-input v-model="detailModel.remark" type="textarea" :rows="4"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="save()">保存</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<style lang="scss" scoped>
</style>
